﻿@model FormInputProject.Models.Record

@{
    ViewBag.Title = "数据饼图";
}

<h2>数据饼图</h2>

<div>
    @Html.ActionLink("曲线", "Index")
</div>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DatePicker</title>
<meta name="author" content="hongru.chen" />
<style>
.date-picker-wp {
display: none;
position: absolute;
background: #f1f1f1;
left: 40px;
top: 40px;
border-top: 4px solid #3879d9;
}
.date-picker-wp table {
border: 1px solid #ddd;
}
.date-picker-wp td {
background: #fafafa;
width: 22px;
height: 18px;
border: 1px solid #ccc;
font-size: 12px;
text-align: center;
}
.date-picker-wp td.noborder {
border: none;
background: none;
}
.date-picker-wp td a {
color: #1c93c4;
text-decoration: none;
}
.strong {font-weight: bold}
.hand {cursor: pointer; color: #3879d9}
</style>
  <script type="text/javascript">
      var DatePicker = function () {
          var $ = function (i) { return document.getElementById(i) },
          addEvent = function (o, e, f) { o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function () { f.call(o) }) },
          getPos = function (el) {
              for (var pos = { x: 0, y: 0 }; el; el = el.offsetParent) {
                  pos.x += el.offsetLeft;
                  pos.y += el.offsetTop;
              }
              return pos;
          }
          var init = function (n, config) {
              window[n] = this;
              Date.prototype._fd = function () { var d = new Date(this); d.setDate(1); return d.getDay() };
              Date.prototype._fc = function () { var d1 = new Date(this), d2 = new Date(this); d1.setDate(1); d2.setDate(1); d2.setMonth(d2.getMonth() + 1); return (d2 - d1) / 86400000; };
              this.n = n;
              this.config = config;
              this.D = new Date;
              this.el = $(config.inputId);
              this.el.title = this.n + 'DatePicker';
              this.update();
              this.bind();
          }
          init.prototype = {
              update: function (y, m) {
                  var con = [], week = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], D = this.D, _this = this;
                  fn = function (a, b) { return '<td title="' + _this.n + 'DatePicker" class="noborder hand" onclick="' + _this.n + '.update(' + a + ')">' + b + '</td>' },
                  _html = '<table cellpadding=0 cellspacing=2>';
                  y && D.setYear(D.getFullYear() + y);
                  m && D.setMonth(D.getMonth() + m);
                  var year = D.getFullYear(), month = D.getMonth() + 1, date = D.getDate();
                  for (var i = 0; i < week.length; i++) con.push('<td title="' + this.n + 'DatePicker" class="noborder">' + week[i] + '</td>');
                  for (var i = 0; i < D._fd() ; i++) con.push('<td title="' + this.n + 'DatePicker" class="noborder"> </td>');
                  for (var i = 0; i < D._fc() ; i++) con.push('<td class="hand" onclick="' + this.n + '.fillInput(' + year + ', ' + month + ', ' + (i + 1) + ')">' + (i + 1) + '</td>');
                  var toend = con.length % 7;
                  if (toend != 0) for (var i = 0; i < 7 - toend; i++) con.push('<td class="noborder"> </td>');
                  _html += '<tr>' + fn("-1, null", "<<") + fn("null, -1", "<") + '<td title="' + this.n + 'DatePicker" colspan=3 class="strong">' + year + '/' + month + '/' + date + '</td>' + fn("null, 1", ">") + fn("1, null", ">>") + '</tr>';
                  for (var i = 0; i < con.length; i++) _html += (i == 0 ? '<tr>' : i % 7 == 0 ? '</tr><tr>' : '') + con[i] + (i == con.length - 1 ? '</tr>' : '');
                  !!this.box ? this.box.innerHTML = _html : this.createBox(_html);
              },
              fillInput: function (y, m, d) {
                  var s = this.config.seprator || '/';
                  this.el.value = y + s + m + s + d;
                  this.box.style.display = 'none';
              },
              show: function () {
                  var s = this.box.style, is = this.mask.style;
                  s['left'] = is['left'] = getPos(this.el).x + 'px';
                  s['top'] = is['top'] = getPos(this.el).y + this.el.offsetHeight + 'px';
                  s['display'] = is['display'] = 'block';
                  is['width'] = this.box.offsetWidth - 2 + 'px';
                  is['height'] = this.box.offsetHeight - 2 + 'px';
              },
              hide: function () {
                  this.box.style.display = 'none';
                  this.mask.style.display = 'none';
              },
              bind: function () {
                  var _this = this;
                  addEvent(document, 'click', function (e) {
                      e = e || window.event;
                      var t = e.target || e.srcElement;
                      if (t.title != _this.n + 'DatePicker') { _this.hide() } else { _this.show() }
                  })
              },
              createBox: function (html) {
                  var box = this.box = document.createElement('div'), mask = this.mask = document.createElement('iframe');
                  box.className = this.config.className || 'datepicker';
                  mask.src = 'javascript:false';
                  mask.frameBorder = 0;
                  box.style.cssText = 'position:absolute;display:none;z-index:9999';
                  mask.style.cssText = 'position:absolute;display:none;z-index:9998';
                  box.title = this.n + 'DatePicker';
                  box.innerHTML = html;
                  document.body.appendChild(box);
                  document.body.appendChild(mask);
                  return box;
              }
          }
          return init;
      }();
      onload = function () {
          new DatePicker('_DatePicker_demo', {
              inputId: 'date-input',
              className: 'date-picker-wp',
              seprator: '-'
          })
      }
</script></head>
<body>
@using (Html.BeginForm())
{
<input type="text" id="date-input" name="start" style="width:100px" />
@*<input type="text" id="demo2" name="end" />*@<br/>
@Html.DropDownList("PointId", "choose")
@Html.DropDownList("PointId2", "choose")
@Html.DropDownList("PointId3", "choose")
@Html.DropDownList("PointId4", "choose")
@Html.DropDownList("PointId5", "choose")
<br/>
<input type="submit" id="iptSubmit" value="提交" />
}
</body>
</html>

<div id="Div1" style="width: 810px; height: 400px; position:relative; margin-right:auto;margin-left:auto; top:20px">
            <table id="Table1" border="1" runat="server">
                <tr>
                    <td>
                        <div id="container" style="width: 800px; height: 350px;"></div>
                    </td>
                    </tr>
                    </table>
            </div>
        
    <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function () {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                        percentageDecimals: 1
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function () {
                                    return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: [
                            ['Firefox', 45.0],
                            ['IE', 26.8],
                            {
                                name: 'Chrome',
                                y: 12.8,
                                sliced: true,
                                selected: true
                            },
                            ['Safari', 8.5],
                            ['Opera', 6.2],
                            ['Others', 0.7]
                        ]
                    }]
                });
            });

        });
    </script>


